import React, {
  Component,
  createRef,
  createContext,
  useRef,
  useState,
} from "react";
import PropType from "prop-types";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import gsap from "gsap"; //动画库
import Stats from "stats.js"; //性能监控
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader.js"; // FBX 模型加载器

// Sprite 运用    雨滴效果

const scene = new THREE.Scene(); // 场景
const camera = new THREE.PerspectiveCamera(
  85,
  window.innerWidth / window.innerHeight,
  1,
  1200
); // 相机

const renderer = new THREE.WebGLRenderer({antialias:true}); //渲染器 antialias扛锯齿 默认为false
const controls = new OrbitControls(camera, renderer.domElement); // 轨道控制器



// 地面 草坪
const PlaneGeometryMap = new THREE.TextureLoader().load('grass.jpg')
PlaneGeometryMap.wrapS = THREE.RepeatWrapping;
PlaneGeometryMap.wrapT = THREE.RepeatWrapping;
const PlaneGeometry = new THREE.PlaneGeometry( 10, 10 );
const MeshBasicMaterial = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.BackSide,map:PlaneGeometryMap} );
const plane = new THREE.Mesh( PlaneGeometry, MeshBasicMaterial );
plane.rotateX(Math.PI/2)
plane.position.y =-1
scene.add( plane );



// 雨点
const textureRain= new THREE.TextureLoader().load('rain.png')
const spriteMaterialRain = new THREE.SpriteMaterial({map:textureRain})
const group = new THREE.Group()
for (let i=0;i<500;i++){
  let spriteRain = new THREE.Sprite(spriteMaterialRain)
 
spriteRain.scale.set(0.2,0.2,1)  // 大小
let k1 = Math.random() -0.5
let k2 = Math.random() - 0.5;

spriteRain.position.set(10*k1,10*Math.random(),10*k2)
  group.add(spriteRain)
}
scene.add(group)

// 时间
const clock = new THREE.Clock()




const axesHelper = new THREE.AxesHelper(5); // 辅助线
scene.add(axesHelper);


const Home = () => {

  const texture = useRef(new THREE.TextureLoader()).current.load(
    "./logo512.png"
  );
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  const geometry = new THREE.BoxGeometry(1, 1, 0.2);
  const ambientLight = new THREE.AmbientLight(0xffffff);
  scene.add(ambientLight);
  const material = [
    new THREE.MeshLambertMaterial({ color: 4244200, opacity: 1 }),
    new THREE.MeshLambertMaterial({ color: 3500454, opacity: 1 }),
    new THREE.MeshLambertMaterial({ color: 3757225, opacity: 1 }),
    new THREE.MeshLambertMaterial({ color: 9145712, opacity: 1 }),
    new THREE.MeshLambertMaterial({
      color: "red",
      opacity: 1,
      transparent: false,
      map: texture,
    }), //transparent 属性为true 的时候，透明的背景就不显示出来了。
    new THREE.MeshLambertMaterial({ color: 3120771, opacity: 1 }),
  ];
  const cube = new THREE.Mesh(geometry, material); // 网格模型，需要几何体和材质
  scene.add(cube);

  // 精灵模型和网格模型的区别和共同点，区别是：精灵一直面向照相机，不受OrbitControls 影响，网格模型受到影响。
  // 他们的相同点是：默认都是一个正方形，尺寸是1
  const mapSprite = new THREE.TextureLoader().load("光点.png");
  const materialSprite = new THREE.SpriteMaterial({
    map: mapSprite,
    color: 0x00ffff,
  }); // 精灵模型只有材质 map 和 color 都设置的时候，他们会相乘（正常开发情况下，不设置颜色）
  const sprite = new THREE.Sprite(materialSprite);
  sprite.scale.set(0.1, 0.1, -1); //精灵模型只有x和y,没有z,因为他没有几何体BoxGeometry，所以只能通过scale 设置大小
  sprite.position.set(0, 0.6, 0);
  // sprite.position.z = 1;
  scene.add(sprite);

  camera.position.z = 5;
 
  function animate() {
    let t = clock.getDelta();
    requestAnimationFrame(animate);
    group.children.forEach(item=>{
      item.position.y -= 1* t
       if(item.position.y <-1){
        item.position.y = 2
       }

    })

    controls.update();
 console.log(clock.getDelta())
    renderer.render(scene, camera);
  }
  animate();
  return <div></div>;
};

export default Home;
